import React from "react";
import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";
import { makeStyles } from "@material-ui/core/styles";

import { AlertContext, useAlertContext } from "../contexts/AlertContext";

function AlertProvider(props) {
	const [alert, setAlert] = React.useState({ msg: "", level: "warning" });
	const setError = (msg)=> {
		setAlert({msg:msg, level:"error"})
	}
	const setWarn = (msg)=> {
		setAlert({msg:msg, level:"error"})
	}
	const setMsg = (msg)=> {
		setAlert({msg:msg})
	}
	return <AlertContext.Provider value={{ alert , setAlert,setError,setWarn,setMsg }}>{props.children}</AlertContext.Provider>;
}

const useStyles = makeStyles((theme) => ({
	root: {
		width: "100%",
		"& > * + *": {
			marginTop: theme.spacing(2),
		},
	},
}));

function Alert(props) {
	// const classes = useStyles();
	// const [open, setOpen] = React.useState(false);
	const { alert, setAlert } = useAlertContext();
	const handleClose = () =>{
		setAlert({msg:"",level:"warning"})
	}
	return (
		<div>
			<Snackbar anchorOrigin={{vertical:"top",horizontal:"center"}} open={alert.msg != ""} autoHideDuration={5000} onClose={handleClose}>
				<MuiAlert onClose={handleClose} severity={alert.level}>
					{alert.msg}
				</MuiAlert>
			</Snackbar>
		</div>
	);
}

export { Alert, AlertProvider };
